<template>
	<view class="userCerts">
		<view class="main" v-if="list&&list.length">
			<view class="main_item" v-for="(item,index) in list" :key="index" @click="toCertDetail(item)">
				<view class="main_item_left">
				  <image :src="func(item)" mode=""></image>
				</view>
				<view class="main_item_right">
					<view class="certContentr">
						<view>
							证件类型：
						</view>
						<view class="certName">
							{{item.certName}}
						</view>
						<view v-if="item.status" class="msg_status" :style="{color:['#6DD400','#FA6400','#E02020'][item.status-1],border:'1px solid '+['#6DD400','#FA6400','#E02020'][item.status-1]}">
							{{['正常','即将过期','已过期'][item.status-1]}}
						</view>
					</view>
					<view class="certContent">
						<view>
							证书编码：
						</view>
						<view>
							{{item.certNum}}
						</view>
					</view>
					<view class="certContent">
						<view>
							有效期：
						</view>
						<view>
							{{item.startTime.slice(0,10)+'至'+item.endTime.slice(0,10)}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-else>
			<image src="/static/images/index/empty1.png" mode=""></image>
			暂无证件
		</view>
	
	</view>
</template>

<script>
export default {
	props:{
		list:{
			type:Array
		}
	},
	methods:{
		toCertDetail(item) {
			const {
				certImg,endTime,startTime,certNum,certWorkName,certName
			} = item;
			const params = {
				certImg,endTime,startTime,certNum,certWorkName,certName
			};
			// 
			// uni.navigateTo({
			// url:'/pageModules/personalInfo/components/userCerts/certDetail?data='+JSON.stringify(params)
			// })
			// 
			uni.setStorageSync('personalInfo_edit_user_certs_msg', JSON.stringify(params));
			uni.navigateTo({
				url:'/pageModules/personalInfo/components/userCerts/certDetail'
			});
		},
		func(item) {
			if (item.certImg) {
				return item.certImg.split(',')[0];
			}
			return '';
		}
	}
};
</script>

<style lang="scss" scoped>
	.userCerts{
		display: flex;
		.empty{
			display: flex;
			justify-content: center;
			width: 100%;
			image{
				width: 64rpx;
				height: 64rpx;
			}
			color: #999;
			flex-direction: column;
			align-items: center;
			padding-top: 300rpx;
			font-size: 24rpx;
		}
		.main{
			margin: 16rpx 20rpx;
			width: 100%;
			
			.main_item{
				display: flex;
				justify-content: space-between;
				background: #ffffff;
				border-radius: 8rpx;
				    padding: 32rpx 28rpx;
				    margin-bottom: 16rpx;
				image{
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
				}
				.main_item_left,.main_item_right{
					display: flex;
				}
				.main_item_right{
					flex: 1;
					flex-direction: column;
					position: relative;
					.certContent{
						display: flex;
						font-size: 24rpx;
						padding: 12rpx 0;
						flex: 1;
						view:nth-child(1){
							// margin-right: 20rpx;
							color: #666;
							width: 124rpx;
						}
						view:nth-child(2){
							color: #333;
							word-break: break-all;
							display: flex;
							flex: 1;
							
						}
					}
					.certContentr{
						display: flex;
						font-size: 24rpx;
						padding: 12rpx 0;
						flex: 1;
						view:nth-of-type(1){
							// margin-right: 20rpx;
							color: #666;
							width: 124rpx;
						}
						.certName{
							width: 290rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space:nowrap
						}
						.msg_status{
							text-align: right;
							border: 1px solid #0091ff;
							border-radius: 2px;
							color: #0091ff;
							font-size: 12px;
							font-weight: 400;
							position: absolute;
							right: 0;
							line-height: 1.2;
							top: 8px;
							padding:0 4rpx;
						}
					}
					
				}
			}
		}
	}
</style>